<template>
	<view>
		<view class="bgwhite flex-between" style="width:100%;height: 80rpx;line-height: 80rpx;">
			<view style="margin-left: 20rpx;">
				<u-icon name="map-fill" label="广州市" color="#999" label-color="#999"></u-icon>
			</view>

			<label style="margin-right: 20rpx;color:#999;">删除</label>
		</view>
		<view class="w94 mt20 radius20">
			<view class="flex-start mt20 radius20 bgwhite" style="width:100%;padding:20rpx 10rpx;">
				<u-icon name="checkmark-circle" size="40" color="#999"></u-icon>
				<view style="margin-right: 20rpx;">
					<image src="http://n1.itc.cn/img8/wb/recom/2016/06/24/146674347901435567.PNG"
						style="width:180rpx;height: 180rpx;" class="radius20"></image>
				</view>
				<view class="flex-between"
					style="flex-direction: column;height: 180rpx;align-items: flex-start;width: 70%;">
					<view style="font-weight: bold;font-size: 30rpx;">油烟机清洗</view>
					<view style="font-size: 24rpx;color:#999;">
						<view style="padding:6rpx 20rpx;background: #eee;color:#000;text-align: center;"
							class="radius20">
							<!-- 燃气热水器维修 -->
							<u-icon name="arrow-down" label="燃气热水器维修" color="#565656" label-color="565656"
								label-pos="left"></u-icon>
						</view>
					</view>
					<view class="flex-between" style="margin-right: 20rpx;width:100%;">
						<view style="color:red;">
							<label style="font-size: 24rpx;">￥</label>
							<label style="font-size: 34rpx;font-weight: bold;">198.00</label>
							<label style="font-size: 24rpx;font-family: 宋体;">/次</label>
						</view>
						<view>
							<u-number-box color="#fff" bg-color="#2e80fe"></u-number-box>
							<!-- <u-tag type="primary" text="立即预约" mode="dark" shape="circle" bg-color="#2979ff"></u-tag> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="flex-between bgwhite" style="position: fixed;bottom: 0rpx;width:100%;height: 100rpx;">
			<view style="margin-left: 20rpx;">
				<u-icon name="checkmark-circle" size="40" label="全选" color="#999"></u-icon>
			</view>
			<view style="width:80%;margin-right: 20rpx;" class="flex-end items-center">
				<label style="font-size: 24rpx;color:#999;">合计：</label>
				<label style="color:red;font-weight: bold;font-size: 36rpx;margin-right: 20rpx;">￥0.00</label>
				<view style="background: #2979ff;color:#fff;border-radius: 30rpx;padding: 12rpx 50rpx;text-align: center;">
					去下单
				</view>
				<!-- <u-tag type="primary" text="去下单" mode="dark" shape="circle" bg-color="#2979ff"></u-tag> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list: [{
					show: false
				}, {
					show: false
				}, {
					show: false
				}, {
					show: false
				}]
			}
		},
		computed: {

		},
		methods: {
			click(index, index1) {
				if (index1 == 1) {
					this.list.splice(index, 1);
					// this.$u.toast(`删除了第${index}个cell`);
				} else {
					this.list[index].show = false;
					// this.$u.toast(`收藏成功`);
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			}
		}
	}
</script>

<style>
</style>
